<?php
/** @var $this ZetaPrints_DistributionMap_Block_Map_Static */
//$url = $this->getBaseGoogleUrl();
$_baseurl = $this->getMapUrl();
$_sensor = $this->getSensor(); //'true';
// we may decide this dynamically at later stage
$_libraries = 'geometry';
$_language = $this->getLanguage(); // $_store -> getConfig('general/locale/code');
$_region = $this->getRegion(); // $_store -> getConfig('general/country/default');
$_api = $this->getMapApi(); // '3.4';
$height = $this->getMapHeight('admin'); // 640;
$width = $this->getMapWidth('admin'); // 480;
$_url_params = array('sensor' => $_sensor, 'libraries' => $_libraries, 'language' => $_language, 'region' => $_region, 'v' => $_api);
$_url = $_baseurl . '?' . http_build_query($_url_params);
$_url .= '&callback=addMaps'; // we will load gmaps only if such option is present

?>

<!-- <?php echo get_class($this);?> -->
<script type="text/javascript">
  Event.observe(window, 'load', replaceStaticMap);
  var kmls = null;
  var randid = 1;
  <?php if($kml = $this->renderKml()):?>
    kmls = <?php echo $kml;?>;
  <?php endif;?>
  var options = [];

  function replaceStaticMap() {
    var labels = $$('div.item-text .item-options > dt'); // option label is here
    var regex = new RegExp('\\*\\*\\*kml\\*\\*\\*\s*$', 'i'); // this is regex for map
    if(!labels || labels.length == 0){ // no options, then stop
      return;
    }
    labels.each(function(l) { // check each option
      var self = $(l);
      var content = self.innerHTML; // original label
      var clean = content.stripTags().strip(); // get label content stripped of tags and white space
      if (regex.test(clean)) {
        var opt = self.next('dd');
        var truncated_full = opt.innerHTML;
        var truncated = '';
        if(truncated_full.indexOf('... <span ') != -1){ // if content length is more than 50 chars it is truncated
          opt.stopObserving('mouseover').stopObserving('mouseout'); // some events are observed,
          // which will trigger errors if not removed
          var span = opt.down('span');
          truncated = span.innerHTML.unescapeHTML().strip();
          var script = opt.down('script');
          Element.replace(span, ''); // clean unwanted html elements
          Element.replace(script,'');
        }
        truncated_full = opt.innerHTML;
        truncated_full = truncated_full.unescapeHTML().unescapeHTML().strip(); // get actual option value - it is being escaped so we
        if(truncated) {
          truncated_full = truncated_full.replace(truncated.unescapeHTML(), '');
        }
        // need to un escape it back
        if (truncated_full) { // if there is something left
          var full_value = truncated_full.replace(/\s*\.\.\.\s*$/im,'').unescapeHTML().strip(); // get it
          if(truncated){
            full_value += truncated.unescapeHTML();
          }
          try{
            var obj = full_value.evalJSON(true);
            opt.map_nodes = obj;
          }catch(e){
            alert('JavaScript error. Cannot render map.');
            return;
          }
          opt.innerHTML = '<?php echo $this->__('Loading Google map');?>';
          opt.kml = addKml(kmls, full_value);
        }
        options.push(opt);
        content = content.replace(regex, '');
        self.update(content);
      }
    });
    if(options.length > 0) {
      loadScript('<?php echo $_url;?>');
    }
  }

  function addMaps()
  {
    if(options.length > 0){
      options.each(function(o) {
        var opt = $(o);
        var id = randid++;
        var width = <?php echo (int)$width;?> + 'px';
        var height = <?php echo (int)$height;?> + 'px';
        var config = {};
        config.element = 'map_canvas_' + id;
        config.coords = opt.map_nodes;
        var top = opt.getHeight();
        var map_canvas = '<div class="map-canvas" id="' + config.element + '" style="width: ' + width + '; height: ' + height + '"></div>';
        opt.update(map_canvas);
        var map = new Distromap(config, true);
        if(opt.kml) {
          opt.insert('<br/>' + o.kml);
        }
      });
    }
  }
</script>
